<script setup>
import { ref, onMounted, watchEffect } from 'vue';
import { Fold, Expand } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
import useLayOutSettingStore from '@/store/modules/setting.js';

let route = useRoute();
// let route = useRoute()
// 获取仓库实例
const store = useLayOutSettingStore();

// 获取layout配置的相关仓库
const handleClick = () => {
  store.fold = !store.fold;
};
const handle = () => {
  console.log('route:', route);
  console.log('matched:', route.matched);
};
</script>

<template>
  <!-- 左侧静态 -->
  <el-icon style="margin-right: 10px" @click="handleClick">
    <component :is="store.fold ? 'Fold' : 'Expand'"></component>
  </el-icon>
  <!-- 左侧面包-->
  <el-breadcrumb separator-icon="ArrowRight">
    <el-breadcrumb-item v-for="item in route.matched" :key="item.path">
      <el-icon>
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span :to="item.path">{{ item.meta.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped></style>
